<template>

    <div id="app">
        <div class="login">
            <el-card>
                <el-form :model="form">

                    <div style="margin-top: 5px;margin-bottom: 20px;text-align: center;margin-left: 15px">
                        <span style="font-size: 22px;">登录义工网</span>
                    </div>
                    <el-form-item>
                        <el-input v-model="form.id" prefix-icon="el-icon-user"
                                  placeholder="用户账号/邮箱/手机号码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.pass" prefix-icon="el-icon-lock"
                                  placeholder="密码"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button style="width: 100%;" type="success" autofocus @click="login">登录</el-button>
                    </el-form-item>
                    <el-form-item style="margin: 0;padding: 0;text-align: end">
                        <!--                        <a style="font-size: 13px; margin: 0;padding: 0" @click="zcdialgo =true">还没有账号？立即注册</a>-->
                        <el-button style="width: 100%;" type="primary" autofocus @click="zcdialgo =true">还没有账号？立即注册
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <el-dialog
                title="注册新用户"
                :visible="zcdialgo">
            <el-form :model="adddata" label-width="70px">
                <el-form-item label="密码">
                    <el-input v-model="adddata.pass"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="adddata.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="adddata.age"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <div style="text-align: start;margin-left: 20px">
                        <el-radio-group v-model="adddata.sex">
                            <el-radio-button label="男"></el-radio-button>
                            <el-radio-button label="女"></el-radio-button>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="收货地址">
                    <el-input v-model="adddata.address"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="adddata.phone"></el-input>
                </el-form-item>
            </el-form>
            <span SLOT="footer" class="dialog-footer">
    <el-button @click="zcdialgo = false">取 消</el-button>
    <el-button type="primary" @click="zc">确 定</el-button>
                  </span>
        </el-dialog>
    </div>
</template>

<script>
    var t;
export default {
    name: "Login",
    data() {
        return {
            zcdialgo: false,
            form: {
                id: '',
                pass: '',
            },
            adddata: {
                name: '',
                pass: '',
                sex: '男',
                age: '',
                address: '',
                phone: '',
            }
        }
    },
    created() {
        t = this;
    },
    mounted() {

    },
    methods: {
        login() {
            if (this.form.id === '') {
                this.$message.error("请输入账号")
                return;
            }
            if (this.form.pass === '') {
                this.$message.error("请输入密码")
                return;
            }
            

           /* this.axios.get("/user", {
                params: {
                    id: this.form.id,
                    pass: this.form.pass,
                }
            }).then(function (res) {
                console.log(res);
               /!* if (res.data.code === 1) {
                    t.$store.user = res.data.data;
                    window.localStorage.setItem("user", JSON.stringify(res.data.data));
                    t.$message.success("欢迎 ！" + res.data.data.name + '');
                    t.$router.push("/Home")
                } else {
                    t.$message.error(res.data.msg)
                }*!/
            });*/

        },
        zc() {
            var q = this;

            this.axios.post("user", {
                name: this.adddata.name,
                pass: this.adddata.pass,
                sex: this.adddata.sex,
                age: this.adddata.age,
                address: this.adddata.address,
                phone: this.adddata.phone,
            })
                .then(function (res) {
                    if (res.data.code === 1) {
                        t.form.id = res.data.data.id;
                        t.form.pass = res.data.data.pass;
                        t.zcdialgo = false;
                        q.$message.success("注册成功！你的账号ID是 ： " + t.form.id);
                        //  t.$message.success("注册成功！你的账号ID是 ： "+t.from.id)
                    }
                    console.log(res);
                }).catch(function (error) {
                //t.$message.error("添加失败" + error)
                console.log(error);
            });
        }
    },
    beforeDestroy() {

    },
    props: {},
    computed: {//计算属性

    },
}
</script>

<style lang="less" scoped>

    #app {
        //   background: url("https://blue.landray.com.cn/img/others_bc_bcPic@2x.afb14e25.png");
        // background: url("https://blue.landray.com.cn/img/EKP_banner_bcPic@2x.5598ae02.png");
        background-image: url(//pcbrowser.dd.qq.com/pcbrowserbig/assets/navigate/img/day_cloud.png),linear-gradient(180deg,#0260ac,#3992e0 36%,#9ce0fe 77%,#eff9fd);
    }

    .login {
        width: 400px;
        height: 400px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
    }
</style>
